<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/redux@2.0.0/dist/redux.min.js"></script>
</head>
<body>
  <button id="decrement">-</button>
  <span id="count">0</span>
  <button id="increment">+</button>

  <script>
    const decrementEl = document.querySelector('#decrement')
    const incrementEl = document.querySelector('#increment')
    const countEl = document.querySelector('#count')

    /**
     * 1. 定义reducer函数
     * 作用：根据不同的action对象，返回不同的新的state
     * state: 管理的数据初始状态
     * action: 是一个对象，根据type标记当前想要做什么样的修改
     **/
    function reducer (state = { count: 0 }, action) {
      // 数据不可变：基于原始状态生成一个新的状态
      if (action.type === 'INCREMENT') {
        return { count: state.count + 1 }
      }
      if (action.type === 'DECREMENT') {
        return { count: state.count - 1 }
      }
      return state
    }
    /**
     * 2.根据reducer函数生成一个store实例
    **/
    const store = Redux.createStore(reducer)

    /**
     * 3.根据store实例的subscribe订阅数据变化
     * 该回调函数可以在每次state发生变化的时候自动执行
    */
    store.subscribe(() => {
      console.log('state变化了')
      /**
       * 5.使用store实例的getState方法获取最新的状态数据更新到视图中
      */
      countEl.innerText = store.getState().count
    })

    /**
     * 4.根据store实例的dispatch函数提交action更改状态
    */
   incrementEl.addEventListener('click', () => {
    store.dispatch({
      type: 'INCREMENT'
    })
   })
   decrementEl.addEventListener('click', () => {
    store.dispatch({
      type: 'DECREMENT'
    })
   })
  </script>
</body>
</html>